<template>
	<view class="temp">
		<view class="content">
			<u--form class="formContent" labelPosition="left" :model="formData" :rules="rules" ref="uForm">
				<u-form-item labelWidth='100' label="名称" borderBottom prop="formData.name" ref="name">
					<u--input inputAlign='right' v-model="formData.name" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item labelWidth='100' label="单位名称" borderBottom prop="formData.phone" ref="phone">
					<u--input inputAlign='right' v-model="formData.unitName" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item labelWidth='100' label="联系人" borderBottom prop="formData.region" ref="region">
					<u--input inputAlign='right' v-model="formData.contact" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item labelWidth='100' label="电话" borderBottom prop="formData.address" ref="address">
					<u--input inputAlign='right' v-model="formData.phone" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item labelWidth='100' label="费用" prop="formData.price" ref="address">
					<u--input inputAlign='right' v-model="formData.price" border="none" placeholder="价格"></u--input>
					<view class="priceLable" slot="right">
						<text>元</text>
					</view>
				</u-form-item>
			</u--form>
			<view class="remaker">
				<view class="title">
					<text>备注</text>
				</view>
				<div class="textArea">
					<u--textarea :count='false' :max-count="200" v-model="formData.remaker" placeholder="请详细描您的服务"
						@input="handleInput"></u--textarea>
					<view class="countText">{{ remainingText }}</view>
				</div>
			</view>
		</view>
		<view class="commonBtn">
			<view class="btnCon" @tap="goto('pages/home/headhuntingResult')">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '常威',
					unitName: '猎头中介事务所',
					contact: '来福',
					phone: '',
					price: '',
					remaker: "",
				},
				rules: {

				},
				remainingText: "您还可以输入 200/200",
			}
		},
		methods: {
			handleInput(val) {
				this.remainingText = `您还可以输入 ${200 - val.length}/${200}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.temp {
		position: relative;
		height: 100%;
		background-color: #F6F8FC;

		.content {
			padding: 24rpx;
		}

		.formContent {
			padding: 24rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
		}

		.remaker {
			padding: 12rpx;
			margin-top: 16rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);

			.title {
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(54, 68, 79, 1);
			}

			.textArea {
				position: relative;
				margin-top: 24rpx;
			}

			.countText {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 32rpx;
				color: rgba(152, 160, 166, 1);
			}
		}
	}
	
	.priceLable{
		margin-left: 14rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: rgba(94, 103, 110, 1);
	}
</style>